<template>
  <div class="index-main">
    <div class="layer">
      <el-tabs
        type="border-card"
        v-model="activeTab"
        @tab-click="tabChange"
        v-infinite-scroll="load"
        infinite-scroll-disabled="noMore"
      >
        <el-tab-pane
          v-for="(item, index) in tags"
          :name="item"
          :key="index"
          :label="item"
        >
          <el-card shadow="never" v-for="item in list" :key="item.id">
            <div
              class="title"
              @click="$router.push('/art?id=' + item.id)"
              :style="{
                cursor: 'pointer',
                color: $store.state.isNightMode ? '#fff' : '#000',
              }"
            >
              {{ item.title + " (" + item.tag + ")" }}
            </div>
            <div
              class="con"
              @click="$router.push('/art?id=' + item.id)"
              :style="{
                cursor: 'pointer',
                color: $store.state.isNightMode ? '#fff' : '#000',
              }"
            >
              {{ item.con }}
            </div>
          </el-card>
          <div v-if="list.length === 0" class="no-more">
            文章列表为空，请添加
          </div>
          <div v-else-if="noMore" class="no-more">没有更多了</div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      tags: ["全部", ...this.$store.state.tags],
      activeTab: "全部",
      date: 0,
      page: 1,
      noMore: false,
    };
  },
  mounted() {
    this.getArticles();
    this.$bus.$on("searchTitle", this.searchTitle);
    this.$bus.$on("getArticlesByDate", this.getArticlesByDate);
    this.$store.state.articles = this.getItem("articles", []);
  },
  methods: {
    getArticles({ page = 1, size = 10, isAppend = false } = {}) {
      let articles = this.getItem("articles", []);
      // if (this.$store.state.searchTitle) {
      //   let reg = new RegExp(this.$store.state.searchTitle);
      //   articles = articles.filter((item) => reg.test(item.title));
      // }
      let tag = this.activeTab === "全部" ? "" : this.activeTab;
      if (tag) {
        articles = articles.filter((item) => item.tag === tag);
      }
      if (this.date) {
        articles = articles.filter((item) => {
          let limitTime = new Date(
            Date.now() - this.date * 24 * 60 * 60 * 1000
          );
          let year = limitTime.getFullYear();
          let month = limitTime.getMonth() + 1;
          let day = limitTime.getDate();
          limitTime =
            "" +
            year +
            (month < 10 ? "0" + month : month) +
            (day < 10 ? "0" + day : day);
          return item.date - 0 >= limitTime - 0;
        });
      }
      let data = articles.splice((page - 1) * size, size);
      if (isAppend) {
        this.list.push(...data);
      } else {
        this.list = data;
      }
      console.log(data);
      return data;
    },
    tabChange() {
      this.$store.state.searchTitle = "";
      this.getArticles();
    },
    searchTitle() {
      this.getArticles();
    },
    getArticlesByDate(time) {
      this.$store.state.searchTitle = "";
      this.date = time;
      this.getArticles();
    },
    load() {
      this.page++;
      let data = this.getArticles({ page: this.page, isAppend: true });
      // console.log(data);
      if (data.length === 0) {
        this.noMore = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.index-main {
  height: 100%;
  overflow: auto;
  .layer {
    width: 1000px;
    margin: 0 auto;
    .el-tabs {
      margin-top: 20px;
      background-color: transparent;
      .el-card {
        margin-bottom: 10px;
        background-color: transparent;
        border-color: #bbb;
        .title {
          font-weight: bold;
          font-size: 18px;
          margin-bottom: 10px;
          font-family: initial;

          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .con {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .no-more,
      .no-more {
        text-align: center;
      }
    }
  }
}
</style>